<template>
	<div id="JFDH" :style="{height: currHeight + 'px'}">
		<!-- 头部导航条 -->
		<div class="top_">
			<van-nav-bar title="积分兑换" left-text="返回" left-arrow
			     @click-left="onClickLeft"
			     @click-right="onClickRight"
			>
			<template #right>
			    <van-icon name="ellipsis" size="18" />
			</template>
			</van-nav-bar>
		</div>

		<div class="count">
		<!-- 内容 -->
		<div class="center">
			<div class="balance_text">积分余额</div>
			<div class="balance">{{balance}}</div>
		</div>
		<!--剩余 residue -->
		<div class="residue">
			<div class="res" v-for="(item,index) in lists" :key="index">

				<img class="loge" :src="item.src">
				<div class="dollr">
					￥{{item.dollr}}
				</div>
				<div class="res_text">
					<div class="res_text_one">{{item.name}}</div>
					<div class="res_text_two">需要积分 : {{item.num}}</div>
				</div>
				<img class="right" src="../assets/images/个人信息/个人信息(绑定手机）_03.png">
			</div>
		</div>
	</div>
	</div>
</template>
<script> 
	export default {
		data() {
			return {
				balance: '20000.0',
				currHeight: '',
				active: 2,
				lists: [{
						dollr:'200',
						src: require('../assets/images/积分兑换/pic_01..png'),
						name: '200元储蓄卡抵用卷',
						num: '100',
					},
					{
						dollr:'200',
						src: require('../assets/images/积分兑换/pic_01..png'),
						name: '200元储蓄卡抵用卷',
						num: '100',
					},
				]
			}
		},
		methods: {
			onClickLeft() {
			       
			this.$router.go(-1)
			},
			onClickRight(){
			
			},
			},
			mounted() {
				this.currHeight = document.documentElement.clientHeight
				window.onresize = () => {
				this.currHeight = document.documentElement.clientHeight
				}
			},
	};
</script>

<style scoped lang="less">
	#JFDH{
		background: #F3F4F6;
		width: 100%;
	}
.count{
	padding-top: 80px;
}
	// 积分余额
	.center {
		margin-top: 20px;
		width: 100%;
		background: white;
		height: 160px;
		padding-left: 24px;
		padding-right: 24px;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid gray;

		.balance_text {
			width: 25%;
			font-size: 40px;
			font-family: HiraginoSansGB;
			font-weight: normal;
			color: #333333;
			margin-top: 40px;
		}

		.balance {
			width: 20%;
			margin-top: 40px;
			height: 24px;
			font-size: 30px;
			font-family: HiraginoSansGB;
			font-weight: bold;
			color: #FF4242;
		}
	}

	//剩余
	.residue {
		margin-top: 40px;
		.res {
			box-sizing: border-box;
			padding: 15px 24px 15px 27px;
			margin-top: 20px;
			background: white;
			display: flex;
			justify-content: space-between;
			position: relative;
			.dollr{
				font-size: 20px;
				font-family: Arial;
				font-weight: 900;
				color: white;
				position: absolute;
				top: 50px;
				left: 45px;
			}
			.res_text{
				width: 67%;
				.res_text_one{
					margin-top: 5px;
					font-size: 30px;
					font-family: HiraginoSansGB;
					font-weight: normal;
					color: #090909;
				}
				.res_text_two{
					margin-top: 5px;
					font-size: 24px;
					font-family: HiraginoSansGB;
					font-weight: normal;
					color: #b6b6b6;
				}
			}
			.loge {
				height: 110px;
			}
			.right{
				margin-top: 40px;
				height:28px;
			}
		}
	}
</style>
